<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<h:head>
	<h:outputStylesheet name="hiperion.css" library="css" />
</h:head>
<h:body>
	<ui:composition template="/resources/template/layoutMenu.xhtml">
		<ui:define name="content">
			<h:form id="registrarCienteForm">
				<p:toolbar>
					<p:toolbarGroup align="left">
						<p:commandButton type="button" value="Crear" icon="ui-icon-person" onclick="PF('dlg').show();" styleClass="negrita" />
					</p:toolbarGroup>
				</p:toolbar>
				<p:dialog id="dilogCrearCliente" header="Registrar Cliente" widgetVar="dlg" resizable="false">
					<table>
						<tbody>
							<tr>
								<td>
									<table>
										<tr>
											<td><p:outputLabel value="Tipo de Persona: *" styleClass="negrita" /></td>
											<td><p:selectOneMenu id="tipoPersonaId" value="#{clienteBean.tipoPersona}" required="true" effect="drop">
													<f:selectItem itemLabel="Seleccione" noSelectionOption="true" />
													<f:selectItems value="#{clienteBacking.tipoPersonaItems}" />
													<p:ajax event="change" listener="#{clienteBacking.selectTipoPersona(clienteBean.tipoPersona)}" update="tipoIdentificacionId, idCedula" />
												</p:selectOneMenu></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Identificacion: *" styleClass="negrita" /></td>
											<td><p:selectOneMenu id="tipoIdentificacionId" value="#{clienteBean.tipoIdentificacion}" required="true" effect="drop">
													<f:selectItem itemLabel="Seleccione" noSelectionOption="true" />
													<f:selectItems value="#{clienteBacking.identificacionItems}" />
												</p:selectOneMenu></td>
											<td><p:inputText id="idCedula" value="#{clienteBean.identificacion}" disabled="#{clienteBacking.activarIdentificacion}"
													maxlength="#{clienteBacking.longitudIdentificacion}" /></td>
										</tr>
									</table>
									<table>
										<tr>
											<td><p:outputLabel value="Apellido Paterno: *" styleClass="negrita" /></td>
											<td><p:inputText value="#{clienteBean.apePaterno}" /></td>
											<td><p:outputLabel value="Apellido Materno: *" styleClass="negrita" /></td>
											<td><p:inputText value="#{clienteBean.apeMaterno}" /></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Nombres:* " styleClass="negrita" /></td>
											<td colspan="4"><p:inputText value="#{clienteBean.nombre}" style="width: 370px;" /></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Razon Social: *" styleClass="negrita" /></td>
											<td><p:inputText value="#{clienteBean.razonSocial}" /></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Provincia *" styleClass="negrita" /></td>
											<td colspan="4"><p:selectOneMenu id="provinciaId" value="#{clienteBean.codigoProvincia}" required="true" effect="drop">
													<f:selectItem itemLabel="Seleccione" noSelectionOption="true" />
													<f:selectItems value="#{clienteBacking.provinciasItems}" />
													<p:ajax event="change" listener="#{clienteBacking.obtenerCiudadesPorProvincia(clienteBean.codigoProvincia)}" update="ciudadId" />
												</p:selectOneMenu></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Ciudad: *" styleClass="negrita" /></td>
											<td colspan="4"><p:selectOneMenu id="ciudadId" value="#{clienteBean.codigoCiudad}" effect="drop">
													<f:selectItem itemLabel="Seleccione" noSelectionOption="true" />
													<f:selectItems value="#{clienteBacking.ciudadesItems}" />
												</p:selectOneMenu></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Email: *" styleClass="negrita" /></td>
											<td><p:inputText value="#{clienteBean.email}" /></td>
											<td><p:outputLabel value="Fecha de Nacimiento:* " styleClass="negrita" /></td>
											<td><p:calendar navigator="true" effect="explode" yearRange="c-100:c-17" value="#{clienteBean.fechaNacimiento}" /></td>
										</tr>
										<tr>
											<td><p:outputLabel value="Act/Profecion: *" styleClass="negrita" /></td>
											<td><p:inputText value="#{clienteBean.actividadProfecion}" /></td>
											<td><p:outputLabel value="Giro del Negocio: *" styleClass="negrita" /></td>
											<td><p:inputText value="#{clienteBean.giroNegocio}" /></td>
										</tr>
									</table>
								</td>
								<td><p:panel header="Direcion del Cliente">
										<table>
											<tr>
												<td colspan="4"><p:outputLabel value="Direccion de Cobro: *" styleClass="negrita" /></td>
											</tr>
											<tr>
												<td colspan="4"><p:inputText value="#{clienteBean.direccionCobro}" style="width: 370px;" /></td>
											</tr>
											<tr>
												<td><p:outputLabel value="Telefono: *" styleClass="negrita" /></td>
												<td><p:inputText value="#{clienteBean.telefonoCobro}" /></td>
												<td><p:outputLabel value="Celular: *" styleClass="negrita" /></td>
												<td><p:inputText value="#{clienteBean.celular}" /></td>
											</tr>
											<tr>
												<td colspan="4"><p:outputLabel value="Direccion de Oficina: *" styleClass="negrita" /></td>
											</tr>
											<tr>
												<td colspan="4"><p:inputText value="#{clienteBean.direccionOficina}" style="width: 370px;" /></td>
											</tr>
											<tr>
												<td><p:outputLabel value="Telefono: *" styleClass="negrita" /></td>
												<td><p:inputText value="#{clienteBean.telefonoOficina}" /></td>
											</tr>
											<tr>
												<td colspan="4"><p:outputLabel value="Direccion de Domicillo: *" styleClass="negrita" /></td>
											</tr>
											<tr>
												<td colspan="4"><p:inputText value="#{clienteBean.direccionDomicillo}" style="width: 370px;" /></td>
											</tr>
											<tr>
												<td><p:outputLabel value="Telefono: *" styleClass="negrita" /></td>
												<td><p:inputText value="#{clienteBean.telefonoDomicillo}" /></td>
											</tr>
										</table>
									</p:panel></td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="2"><p:commandButton value="Guardar" action="#{clienteBacking.guardarCliente}" /></td>
							</tr>
						</tfoot>
					</table>
				</p:dialog>
			</h:form>
			<p:separator />
			<h:form>
				<p:dataTable var="cliente" value="#{clienteBacking.clientes}" editable="true" rows="2" paginator="true">
					<f:facet name="header">Listado de Clientes de AVILA</f:facet>
					<p:column headerText="Identificacion" sortBy="persona.identificacion" filterBy="persona.identificacion" id="identificacion">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{cliente.persona.identificacion}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{cliente.persona.identificacion}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Nombre" sortBy="persona.nombre" filterBy="persona.nombre" id="nombre">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{cliente.persona.nombre}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{cliente.persona.nombre}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Apellido Paterno" sortBy="persona.apellidoPaterno" filterBy="persona.apellidoPaterno" id="apellidoPaterno">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{cliente.persona.apellidoPaterno}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{cliente.persona.apellidoPaterno}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Apellido Materno" sortBy="persona.apellidoMaterno" filterBy="persona.apellidoMaterno" id="apellidoMaterno">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{cliente.persona.apellidoMaterno}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{cliente.persona.apellidoMaterno}" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Opciones" style="width:50px">
						<p:rowEditor />
					</p:column>
					<p:ajax event="rowEdit" listener="#{clienteBacking.editListener}" />
				</p:dataTable>
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>
</html>
